<template>
  <span
    v-if="hasAuth"
    v-on:mouseover="handleOver()"
    v-on:mouseout="handleOut()"
    class="base-btn"
    :style="{
      'background-color': btnData.bgColor
        ? btnData.bgColor
        : btnData.type === 'filter' || btnData.type === 'refresh'
        ? 'transparent'
        : '#0D48CE',
      '--btnBgColor': btnData.bgColor
        ? btnData.bgColor
        : btnData.type === 'filter' || btnData.type === 'refresh'
        ? 'transparent'
        : '#0D48CE',
      color: btnData.type === 'refresh' ? '#0D48CE' : '#fff',
      border: btnData.type === 'refresh' ? '1px solid #0D48CE' : ''
    }"
  >
    <div>
      <img v-if="btnData.type !== 'filter'" :src="btnType[btnData.type]" />
      <label class="blue-text" v-if="btnData.type === 'filter'">
        {{ btnData.name }}
      </label>
      <label v-else>{{ btnData.name }}</label>
      <template v-if="btnData.type === 'filter'">
        <img :src="btnType[btnData.type].right" v-if="!filterOpened" />
        <img :src="btnType[btnData.type].rightUp" v-else />
      </template>
    </div>
  </span>
</template>

<script>
export default {
  name: 'BaseBtn',
  data() {
    return {
      btnType: {
        add: require('@/assets/add.svg'),
        refresh: require('@/assets/refresh.svg'),
        search: require('@/assets/widget/searchIcon.svg'),
        filter: {
          right: require('@/assets/widget/arrow-down.svg'),
          rightUp: require('@/assets/widget/arrow-up.svg')
        },
        export: require('@/assets/widget/export.svg'),
        fileExport: require('@/assets/widget/file-export.png'),
        exportIn: require('@/assets/widget/import.svg'),
        clear: require('@/assets/widget/clear.svg'),
        ok: require('@/assets/widget/check.svg'),
        cancel: require('@/assets/widget/cancel.svg'),
        prev: require('@/assets/widget/prev.png'),
        next: require('@/assets/widget/next.png'),
        formDel: require('@/assets/widget/form-del.png'),
        review: require('@/assets/widget/review.png'),
        // monitor: require('@/assets/widget/video.svg') // 监控图标
        monitor: require('@/assets/widget/video.svg') // 监控图标
      },
      filterOpened: false
    };
  },
  props: {
    btnData: {
      type: Object,
      required: true
    },
    changeData: {
      default: false
    }
  },
  watch: {
    changeData: {
      handler(val) {
        this.filterOpened = val;
      }
    }
  },
  computed: {
    hasAuth() {
      if (!this.btnData.hasOwnProperty('id')) return true;
      // console.log('this.$store.state.permission.btnAuth:', JSON.stringify(this.$store.state.permission.btnAuth));
      // console.log('this.$route.path+"{"+this.btnData.id+"}":', this.$route.path+"{"+this.btnData.id+"}");
      return (
        this.$store.state.permission.btnAuth.indexOf(
          this.$route.path + '{' + this.btnData.id + '}'
        ) > -1
      );
    }
  },
  created() {},
  methods: {
    handleOver() {},
    handleOut() {}
  }
};
</script>

<style lang="scss" scoped>
.base-btn {
  display: inline-block;
  min-width: 97px;
  height: 34px;
  margin-right: 24px;
  padding: 5px 16px;
  color: #fff;
  border-radius: 4px;
  opacity: 1;
  cursor: pointer;

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  label {
    cursor: pointer;
    padding: 0 4px;
    font-weight: 400;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 500;
    line-height: 2;
  }

  label.blue-text {
    color: #0d48ce;
    font-weight: normal;
    font-size: 14px;
  }
}

.base-btn:hover {
  cursor: pointer;
  animation: lighterBackgroundColor 0.001s 0.2 linear forwards;
  //opacity: 0.8;
  //background-color: rgb(76 125 237) !important;
  //background-color: lighten(var(--btnBgColor), 20%);
}

@keyframes lighterBackgroundColor {
  from {
    background-color: var(--btnBgColor);
  }

  to {
    background-color: rgba(255, 255, 255, 0.8);
  }
}
</style>
